import { useRef } from 'react';

export class BodyState {
  shoulder_angle: number | undefined;

  pose1:
    | {
        right_armpit: number;
        right_arm_shoulder_horizon: number;
        left_armpit: number;
        left_arm_shoulder_horizon: number;
      }
    | undefined;
}

interface DetectProps {
  setBodyState: (body: BodyState) => void;
}
const Detect = (props: DetectProps) => {
  const address = 'localhost';
  const port = 10101;
  const ws = new WebSocket(`ws://${address}:${port}/video`);
  const timer = setInterval(function () {
    if (ws.readyState === 1) {
      // 想服务器发送数据,请求图片,这里发送的内容随便都可以
      ws.send('msg');
      clearInterval(timer);
    }
  }, 10);
  let state: BodyState = new BodyState();
  const imageShow: any = useRef(null);

  ws.onmessage = function (res: MessageEvent) {
    const dataRes: any = JSON.parse(res.data);
    const imgSrc: string = dataRes.img;
    state.shoulder_angle = dataRes.data;
    // console.log(img_src)
    imageShow.current.src = imgSrc;
    ws.send('msg');
  };

  return (
    <div>
      <img ref={imageShow} id="canvas" />
      <div>{state!.shoulder_angle}</div>
    </div>
  );
};

export default Detect;
